<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/2
  Time: 18:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>carousel模块快速使用</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui.css" media="all"></head>
<body>
<div class="layui-row" align="center">
    <form class="layui-form layui-col-md12 we-search" onsubmit="return false;">

        <div class="layui-inline">
            <input type="text" id="uname" name="uname" placeholder="请输入搜索内容" autocomplete="off"
                   class="layui-input">
        </div>
        <button class="layui-btn" lay-submit="" lay-filter="search" data-type="reload"><i class="layui-icon">&#xe615;</i>
        </button>
    </form>
</div>
<div align="center" >
<div class="layui-carousel" id="test1" >
    <div carousel-item>
        <div><img src="${pageContext.request.contextPath}/static/images/252061.jpg" width="100%" height="100%"></div>
        <div><img src="${pageContext.request.contextPath}/static/images/319001.jpg" width="100%" height="100%"></div>
        <div><img src="${pageContext.request.contextPath}/static/images/319372.jpg" width="100%" height="100%"></div>
        <div><img src="${pageContext.request.contextPath}/static/images/321356.jpg" width="100%" height="100%"></div>
        <div><img src="${pageContext.request.contextPath}/static/images/321562.jpg" width="100%" height="100%"></div>
    </div>
</div>


    <hr>

        <div class="layui-row layui-col-space1">
            <div class="layui-col-md3" align="center">
                <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/252061.jpg" width="200px" height="200px" alt=""></div>
                <a href=""><p>直播名称:</p></a>
                <a href=""><p>主播昵称:</p></a>
            </div>
            <div class="layui-col-md3" align="center">
                <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/252061.jpg" width="200px" height="200px" alt=""></div>
                <a href=""><p>直播名称:</p></a>
                <a href=""><p>主播昵称:</p></a>
            </div>
            <div class="layui-col-md3" align="center">
                <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/252061.jpg" width="200px" height="200px" alt=""></div>
                <a href=""><p>直播名称:</p></a>
                <a href=""><p>主播昵称:</p></a>
            </div>
        <div class="layui-col-md3" align="center">
            <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/252061.jpg" width="200px" height="200px" alt=""></div>
            <a href=""><p>直播名称:</p></a>
            <a href=""><p>主播昵称:</p></a>
        </div>
    </div>

    <hr>

    <div class="layui-row layui-col-space1">
        <div class="layui-col-md3" align="center">
            <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/319001.jpg" width="200px" height="200px" alt=""></div>
            <a href=""><p>直播名称:</p></a>
            <a href=""><p>主播昵称:</p></a>
        </div>
        <div class="layui-col-md3" align="center">
            <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/319001.jpg" width="200px" height="200px" alt=""></div>
            <a href=""><p>直播名称:</p></a>
            <a href=""><p>主播昵称:</p></a>
        </div>
        <div class="layui-col-md3" align="center">
            <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/319001.jpg" width="200px" height="200px" alt=""></div>
            <a href=""><p>直播名称:</p></a>
            <a href=""><p>主播昵称:</p></a>
        </div>
        <div class="layui-col-md3" align="center">
            <div class="grid-demo grid-demo-bg1"><img src="${pageContext.request.contextPath}/static/images/319001.jpg" width="200px" height="200px" alt=""></div>
            <a href=""><p>直播名称:</p></a>
            <a href=""><p>主播昵称:</p></a>
        </div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script src="${pageContext.request.contextPath}/static/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '80%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>